{% extends 'base.html' %}
{% load custom_filters %}
{% block title %}购物车展示页{% endblock %}
{% block link %}
  <link rel="stylesheet" href="/static/css/customer/order.css">{% endblock %}
{% block js %}
  <script src="/static/js/customer/shopping_car.js"></script>{% endblock %}
{% block header %}{% include 'include/_header.html' %}{% endblock %}
{% block content %}
  <main id="main">
    {% csrf_token %}
    <div class="layui-container"> <!--实现页面内容居中，两边留白-->
      <table class="layui-hide" id="shopping_list"></table>
      <div class="layui-form layui-border-box layui-table-view layui-table-view-1" lay-filter="LAY-TABLE-FORM-DF-1"
           lay-id="test" style=" ">
        <div class="layui-table-box">
          <div class="layui-table-header">
            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
              <thead>
              <tr>
                <th data-field="0" data-key="1-0-0" data-unresize="true" class=" layui-table-col-special">
                  <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">

                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary"></div>
                  </div>
                </th>
                <th data-field="cover_picture" data-key="1-0-1" class="" style="width: 150px;">
                  <span>封面图</span>
                </th>
                <th data-field="title" data-key="1-0-2" class="layui-unselect" style="width: 380px;">
                  <span>标题</span>
                </th>
                <th data-field="subject" data-key="1-0-3" data-minwidth="150" class="" style="width: 320px;">
                  <span>商品描述</span>
                </th>
                <th data-field="num" data-key="1-0-4" data-minwidth="150" class="" style="width: 80px;">
                  <span>商品数量</span>
                </th>
                <th data-field="money" data-key="1-0-5" class=" layui-unselect" style="width: 100px;">
                  <span>商品单价</span>
                </th>
                <th data-field="status" data-key="1-0-6" class=" layui-unselect" style="width: 100px;">
                  <div class="layui-table-cell"><span>商品状态</span></div>
                </th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="layui-table-body layui-table-main">
            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
              <tbody>
              {% for car in shopping_car_commodities %}
                <tr data-index="{{ forloop.counter0 }}" class="">
                  <td data-field="0" data-key="1-0-0" class="layui-table-col-special">
                    <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">
                      <input type="checkbox"
                             name="id"
                             value="{{ car.id }}"
                             lay-skin="primary">
                      <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon layui-icon-ok"></i></div>
                    </div>
                  </td>
                  <td data-field="cover_picture" data-key="1-0-1" class="" style="width: 150px;">
                    <a href="/commodity/get_detail/?id={{ car.commodity_id }}"><img style="width:100px; height:100px;"
                                                                                    src="{{ car.commodity.cover_picture }}"
                                                                                    alt="商品详情"></a>
                  </td>
                  <td data-field="title" data-key="1-0-2" class="" style="width: 380px;">
                    <span style="padding: 10px;">{{ car.commodity.title }}</span></br>
                    <span style="padding: 10px;">{{ car.commodity.subtitle|slice:50 }}</span>
                  </td>
                  <td data-field="subject" data-key="1-0-3" class="" style="width: 320px;">
                    <span style="padding: 10px;">{{ car.subject }}</span>
                  </td>
                  <td data-field="num" data-key="1-0-4" data-minwidth="150" class="" style="width: 80px;">
                    <input id="number{{ car.id }}" type="number" value={{ car.number }} min="1"
                           style="width:50px;line-height: 20px;text-align: center;border:1px solid white">
                  </td>
                  <td data-field="money" data-key="1-0-5" class="" style="width: 100px;">
                    <span style="padding: 10px; color:red;">￥{{ car.money }}</span>
                  </td>
                  <td data-field="status" data-key="1-0-6" class="" style="width: 100px;">
                    <button onclick="deleteClick({{ car.id }})" type="button" class="layui-btn layui-btn-sm layui-btn-danger"><i
                      class="layui-icon"></i></button>
                    <button onclick="putClick({{ car.id }})" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                  </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% pagination_html %}
        <div class="layui-table-cell laytable-cell-1-0-1" style="height:40px; float:right;margin-top:-45px;"><span
          onclick="payClick()"
          style="background-color:#01AAED;padding: 10px;color:white; cursor: pointer;">确认支付</span></div>

      </div>
    </div>
  </main>
{% endblock %}
{% block footer %}{% include 'include/_footer.html' %}{% endblock %}